<template>
  <div>
    <el-card>
      <el-tooltip
        class="item"
        effect="dark"
        :enterable="false"
        content="被勾选的站点将被批量分配"
        placement="top"
      >
        <el-button
          @click="allot_user"
          class="more_allot"
          icon="el-icon-s-grid"
          type="warning"
          plain
        >批量分配</el-button>
      </el-tooltip>
      <el-table @select="select_station" :data="tableData" border stripe style="width: 100%">
        <el-table-column type="selection"></el-table-column>
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="contact" label="联系人"></el-table-column>
        <el-table-column prop="mobile" label="手机"></el-table-column>
        <el-table-column prop="fixed" label="座机"></el-table-column>
        <el-table-column prop="lng" label="经度"></el-table-column>
        <el-table-column prop="lat" label="纬度"></el-table-column>
        <el-table-column prop="createDate" width="160" label="创建时间"></el-table-column>
        <!-- <el-table-column wthid="160" prop label="操作">
          <template slot-scope="info">
            <el-button
              @click="allot_user(info.row.id)"
              size="small"
              icon="el-icon-s-tools"
              type="warning"
              plain
            >分配站点</el-button>
          </template>
        </el-table-column>-->
      </el-table>
    </el-card>

    <!-- 点击分配后 弹出单位信息 -->
    <el-dialog width="60%" title="选择单位下用户" :visible.sync="dialog_unit_list">
      <!-- <span>这是一段信息</span> -->
      <el-table :data="unit_list" border stripe style="width: 100%">
        <el-table-column prop="unitName" label="单位名称"></el-table-column>
        <el-table-column prop="address" label="单位地址"></el-table-column>
        <el-table-column prop="contacts" label="联系人"></el-table-column>
        <el-table-column prop="phone" label="联系电话"></el-table-column>
        <el-table-column prop label="操作">
          <template slot-scope="info">
            <el-tooltip
              class="item"
              effect="dark"
              content="分配该站点至当前单位下的用户"
              :enterable="false"
              placement="top"
            >
              <el-button
                @click="select_user(info.row.id)"
                size="mini"
                icon="el-icon-user"
                type="warning"
                plain
              >选择用户</el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="dialog_unit_list = false">取 消</el-button>
        <el-button type="primary" @click="dialog_unit_list = false">确 定</el-button>
      </span>-->
    </el-dialog>

    <!-- 选择用户弹出框 -->
    <el-dialog
      title="选择用户"
      width="30%"
      :visible.sync="dialog_select_user"
      @close="user_dialog_close"
    >
      <el-select
        @change="user_select"
        class="el_select"
        v-model="station_user_id.uId"
        clearable
        placeholder="请选择"
      >
        <el-option v-for="item in options" :key="item.id" :label="item.username" :value="item.id"></el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog_select_user = false">取 消</el-button>
        <el-button type="primary" @click="userStation_bind">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Qs from "qs";
export default {
  created() {
    this.one_data();
  },
  data() {
    return {
      tableData: [],
      // 被多选中的站点
      station_id_arr: [],
      // 单位信息弹出框
      dialog_unit_list: false,
      // 单位信息列表
      unit_list: [],
      // 选择用户弹出框
      dialog_select_user: false,
      // 最后发送的对象
      station_user_id: {},
      // 用户数组
      options: [],
      // 选中的站点单个id
      station_id: 0
    };
  },

  methods: {
    // 下拉框变化的时候， 拿到被选中的option  通过改变内存地址 驱动视图更新
    user_select(user_uId) {
      // 拿到选择的用户 id 赋值给对象
      this.station_user_id.uId = user_uId;
      // 更新对象
      this.station_user_id = { ...this.station_user_id };
    },
    // 选择用户弹框退出
    user_dialog_close() {
      // 清除 上一次的 默认的id
      this.station_user_id.uId = "";
    },
    // 点击确认将该站点绑定至指定用户
    async userStation_bind() {
      // this.station_user_id.sId = this.station_id;
      //

      let { data: res } = await this.$http.post(
        "/userStation/bindStations",
        this.station_user_id
      );
      console.log(this.station_user_id);

      if (!this.msg(res)) return;
      this.one_data();
      this.station_user_id = {};
      this.dialog_select_user = false;
      this.dialog_unit_list = false;
    },
    // 提示信息方法
    msg(res) {
      if (res.status == 0) {
        this.$message.success(res.msg);
        return true;
      } else {
        this.$message.error(res.msg);
        // window.location.reload();
        return false;
      }
    },
    // 在单位信息下的 分配用户按钮 点击弹出 对话框
    async select_user(id) {
      let { data: res } = await this.$http.post(
        "/user/listByUnitId",
        Qs.stringify({
          unitId: id
        })
      );
      // if (!this.msg(res)) return;

      this.options = res.rows;

      this.dialog_select_user = true;
    },
    // 点击谈弹出单位列表
    async allot_user(id) {
      let { data: res } = await this.$http.post("/unit/list");

      this.dialog_unit_list = true;
      this.unit_list = res.rows;
      // this.station_user_id.sId = id;
      // this.station_id = id;
    },
    // 当某个站点的多选按钮被选中时，触发的事件(这个事件是为了找到被选中的站点的id)
    select_station(station_arr) {
      // 先准备好一个空数组
      this.station_user_id.sIds = [];
      // 遍历选中的站点，
      station_arr.forEach(item => {
        // 拿到里边的id 放到data的空数组里
        this.station_user_id.sIds.push(item.id);
      });
    },
    // 首屏渲染
    async one_data() {
      let { data: res } = await this.$http("/station/unbindStation");
      this.tableData = res.datas;
    }
  }
};
</script>

<style lang='less' scoped>
.more_allot {
  margin: 10px;
}
.el_select {
  width: 100%;
}
</style>
